<!DOCTYPE html>
<html lang="zh">
<style>
    body {
        background-color: #ccc;
    }

    h2 {
        width: 100px;
        margin: 0 auto;
        margin-top: 10px;
        color: #fff;
    }

    .registerBox {
        background-color: #fff;
        width: 450px;
        height: 250px;
        margin: 10px auto;
        border-radius: 10px;
        padding: 20px 0;
        display: flex;
        flex-direction: column;
    }

    .registerBox li {
        height: 60px;
        padding: 0 20px;
        display: flex;
        align-items: center;
    }

    label {
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 5px;
    }

    input {
        box-sizing: border-box;
        padding: 10px;
        /* width: 300px; */
        border: 1px solid #ccc;
        font-size: 14px;
        flex: 1;
        height: 35px;
    }

    .registerBox li:nth-last-of-type(1) input {
        width: 100%;
        height: 40px;
        line-height: 40px;
        background-color: rgb(54, 154, 222);
        padding: 0;
        border-radius: 5px;
        font-size: 24px;
        color: #fff;
        letter-spacing: 10px;
        text-align: center;
        cursor: pointer;
    }
</style>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>


<body>


    <h2>注册页面</h2>
    <ul class="registerBox">
        <li>
            <label for="username">账号：</label>
            <input type="text" id="username" placeholder="6-13位之间">
        </li>
        <li>
            <label for="password">密码：</label>
            <input type="password" id="password" placeholder="最少8位，由数字和字母组成">
        </li>
        <li>
            <label for="email">邮箱：</label>
            <input type="text" id="email" placeholder="">
        </li>
        <li>
            <label for="nickname">昵称：</label>
            <input type="text" id="nickname" placeholder="默认为账户名">
        </li>
        <li>
            <input type="button" value="注册" id="submit">
        </li>
    </ul>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        let usernameEl = document.getElementById('username');
        let passwordEl = document.getElementById('password');
        let emailEl = document.getElementById('email');
        let nicknameEl = document.getElementById('nickname');
        let submitBtn = document.getElementById('submit');


        submitBtn.onclick = async function () {
            let username = usernameEl.value;
            let password = passwordEl.value;
            let email = emailEl.value;
            let nickname = nicknameEl.value || username;

            let result = await axios({
                method: 'post',
                url: 'http://127.0.0.1:9527/api/users/register',
                data: {
                    username,
                    password,
                    email,
                    nickname
                },
            })

            let data = result.data;
            if (data.code === 1) {
                return alert(data.msg)
            } else {
                alert('注册成功,点击确定跳转')
                let timer = setTimeout(() =>{
                    location.href='./login.html'
                })
            }
        }
    </script>
</body>

</html>